<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/weather">Weather</router-link> |
      <router-link to="/deepComputed">DeepComputed</router-link> |
      <router-link to="/listFilter">ListFilter</router-link> |
      <router-link to="/formTest">FormTest</router-link> |
      <router-link to="/filters">Filters</router-link> |
      <router-link to="/v-Text&V-Html">v_text_html</router-link> |
      <router-link to="/v_once">V-Once</router-link> | 
      <router-link to="/v_pre">V_Pre</router-link> | 
      <router-link to="/customDirective">CustomDirective</router-link> | 
      <router-link to="/lifeCycle">LifeCycle</router-link> | 
      <router-link to="/customEvent">CustomEvent</router-link> | 
      <router-link to="/allEvent">AllEvent</router-link> | 
      <router-link to="/pubSub">PubSub</router-link> | 
      <router-link to="/staticComponent">StaticComponent</router-link> | 
    </nav>
    <router-view/>
    
    <div v-concat="num"></div>
  </div>
</template>
<script>
import RefsTest from '@/components/RefsTest.vue'
export default {
  name: 'App',
  data(){
    return {
      userInfo:{
        name:"less",
        type:"css样式"
      },
      num:13
    }
  },
  components:{
    "RefsTest":RefsTest
  },
  beforeCreate() {
        // console.log("beforeCreate");
        // console.log(this.userInfo);
        // console.log(this.addPerson);
  },
  created() {
    // console.log("created");
    // console.log(this.userInfo.type);
    // console.log(this.addPerson());
  },

  methods: {
    addPerson() {
      return "addPerson执行了"
    },
  
  updated() {
    console.log(this.$refs.refTest);
  },
  
  },
}

</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
a {
  text-decoration: none; /* 取消下划线 */
}
</style>
